import React, { useState, useEffect, useCallback } from "react";
import { Modal, Alert, Form, Radio, Button, Upload, Row, Image, Col, message } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import { SearchSimpleTable } from "@/views/components/SearchTable/index";
import { getGoodsCombinationLogPage, queryTakeUserList } from "../service";
import { useTableConfig } from "@/views/components/SearchTable/hooks/useTableConfig";
import RangeDisablePicker from "@/views/components/RangeDisablePicker";
import ActionSelect from "@/views/components/ActionSelect";
import { BatchSuffixInput } from "@/views/components/PrefixPlaceholder";
import { COMB_LOG_ACTION_TYPE } from "@/views/utils/constant";

const LogCombGoods = ({ onCancel, title, logType }) => {
	const [actionhouse, setActionhouse] = useState(null);

	const tableRequest = getGoodsCombinationLogPage;
	const defaultColumns = [
		{
			name: "组合编码",
			code: "skuCode",
			search: {
				order: 1,
				content: () => <BatchSuffixInput autoMultiLine allowClear clearable placeholder="多个组合编码，以逗号隔开" />
			}
		},
		{
			name: "操作内容",
			hidden: logType == "deleteLog",
			code: "operContent"
		},
		{
			name: "操作",
			hidden: logType == "deleteLog",
			code: "operType",
			render: value => {
				return (
					<span>
						{COMB_LOG_ACTION_TYPE.map(item => {
							if (item.value == value) {
								return <span>{item.label}</span>;
							}
						})}
					</span>
				);
			}
		},
		{
			name: "操作人",
			code: "operatorName",
			search: {
				order: 2,
				span: 3,
				code: "operatorId",
				content: () => {
					return <ActionSelect value={actionhouse} onChange={handleActionChange} />;
				}
			}
		},
		{
			name: "操作时间",
			code: "operTime",
			search: {
				order: 11,
				span: 6,
				keys: ["startTime", "endTime"],
				content: () => <RangeDisablePicker showTime diff="6 months" className="width-full" />
			}
		}
	];
	const handleActionChange = value => {
		setActionhouse(value);
	};
	const tableKey = "id";
	const rowKey = "LogCombGoods321";
	const [columns, setColumns] = useState(defaultColumns);

	const beforeQuerySearch = ({ API_DATA }) => {
		return {
			...API_DATA,
			logType: logType === "updateLog" ? 1 : 2
		};
	};
	const { selectedKeys, fetchList, selectedRows, dataSource, query, updateDataSource, searchSimpleTableProps } = useTableConfig({
		tableKey,
		rowKey,
		columns,
		tableRequest,
		autoFetch: true,
		hasPagination: true,
		hasQuickSearch: false,
		beforeQuerySearch,
		pageSize: 50,
		resetSourceData: false,
		hasColsSetting: false,
		columnResize: true
		// footerDataSource
	});
	return (
		<CommonModal
			title={{ title: title }}
			open={true}
			className="views-table-dialog"
			width="968px"
			height="491px"
			okText="保存"
			onCancel={onCancel}
			footer={
				<Row justify="end">
					<Col>
						<Button size="middle" onClick={onCancel}>
							取消
						</Button>
					</Col>
				</Row>
			}
		>
			<div className="views-container" style={{ height: 420 }}>
				<SearchSimpleTable key={tableKey} {...searchSimpleTableProps} />
			</div>
		</CommonModal>
	);
};
export default LogCombGoods;
